<template>
	<view class="order-detail-container" v-if="orderInfo">
		<!-- 订单基本信息 -->
		<view class="order-card">
			<view class="order-header">
				<text class="order-title">{{ orderInfo.title }}</text>
				<text class="order-status" :class="getStatusClass(orderInfo.status)">
					{{ getStatusText(orderInfo.status) }}
				</text>
			</view>
			
			<view class="order-info">
				<view class="info-row">
					<text class="label">预算金额：</text>
					<text class="value budget">￥{{ orderInfo.budget }}</text>
				</view>
				<view class="info-row">
					<text class="label">技术分类：</text>
					<text class="value">{{ orderInfo.categoryName }}</text>
				</view>
				<view class="info-row">
					<text class="label">发布时间：</text>
					<text class="value">{{ formatTime(orderInfo.createTime) }}</text>
				</view>
				<view class="info-row">
					<text class="label">完成期限：</text>
					<text class="value">{{ formatTime(orderInfo.deadline) }}</text>
				</view>
				<view class="info-row" v-if="orderInfo.techName">
					<text class="label">技术员：</text>
					<text class="value">{{ orderInfo.techName }}</text>
				</view>
			</view>
		</view>
		
		<!-- 需求描述 -->
		<view class="description-card">
			<view class="card-title">需求描述</view>
			<text class="description-text">{{ orderInfo.description }}</text>
		</view>
		
		<!-- 联系信息 -->
		<view class="contact-card" v-if="showContactInfo">
			<view class="card-title">联系方式</view>
			<view class="contact-info">
				<view class="contact-item" v-if="orderInfo.contactPhone">
					<text class="contact-label">电话：</text>
					<text class="contact-value">{{ orderInfo.contactPhone }}</text>
					<button class="contact-btn" @click="makeCall(orderInfo.contactPhone)">拨打</button>
				</view>
				<view class="contact-item" v-if="orderInfo.contactQQ">
					<text class="contact-label">QQ/微信：</text>
					<text class="contact-value">{{ orderInfo.contactQQ }}</text>
				</view>
			</view>
		</view>
		
		<!-- 订单进度 -->
		<view class="progress-card" v-if="progressList.length > 0">
			<view class="card-title">订单进度</view>
			<view class="progress-list">
				<view class="progress-item" v-for="progress in progressList" :key="progress.id">
					<view class="progress-dot" :class="getProgressClass(progress.progressType)"></view>
					<view class="progress-content">
						<text class="progress-text">{{ progress.content }}</text>
						<text class="progress-time">{{ formatTime(progress.createTime) }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-section" v-if="showActions">
			<button 
				class="action-btn accept" 
				v-if="canAccept"
				@click="acceptOrder"
			>
				接单
			</button>
			
			<button 
				class="action-btn assign" 
				v-if="canAssign"
				@click="assignOrder"
			>
				指派技术员
			</button>
			
			<button 
				class="action-btn complete" 
				v-if="canComplete"
				@click="completeOrder"
			>
				标记完成
			</button>
			
			<button 
				class="action-btn progress" 
				v-if="canAddProgress"
				@click="addProgress"
			>
				添加进度
			</button>
			
			<button 
				class="action-btn cancel" 
				v-if="canCancel"
				@click="cancelOrder"
			>
				取消订单
			</button>
		</view>
		
		<!-- 添加进度弹窗 -->
		<view class="custom-popup" v-if="showProgressPopup">
			<view class="popup-mask" @click="closeProgressPopup"></view>
			<view class="progress-popup">
				<view class="popup-header">
					<text class="popup-title">添加订单进度</text>
					<text class="popup-close" @click="closeProgressPopup">×</text>
				</view>
				<view class="popup-content">
					<textarea 
						class="progress-input" 
						placeholder="请输入进度内容..."
						v-model="progressContent"
						maxlength="200"
					></textarea>
					<view class="popup-actions">
						<button class="popup-btn cancel" @click="closeProgressPopup">取消</button>
						<button class="popup-btn confirm" @click="submitProgress">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="loading" v-else>
		<text>加载中...</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: null,
				progressList: [],
				progressContent: '',
				loading: false,
				showProgressPopup: false
			}
		},
		computed: {
			showContactInfo() {
				// 技术员接单后或者是订单发布者可以看到联系方式
				if (!this.$store || !this.$store.getters || !this.orderInfo) return false
				return (
					(this.$store.getters.isTech && this.orderInfo.techId === this.$store.getters.userInfo.id) ||
					(this.$store.getters.isUser && this.orderInfo.userId === this.$store.getters.userInfo.id) ||
					this.$store.getters.isAdmin ||
					this.$store.getters.isDispatcher
				)
			},
			
			showActions() {
				return this.canAccept || this.canAssign || this.canComplete || 
					   this.canAddProgress || this.canCancel
			},
			
			canAccept() {
				return this.$store && this.$store.getters && this.$store.getters.isTech && this.orderInfo && this.orderInfo.status === 1
			},
			
			canAssign() {
				return this.$store && this.$store.getters && this.$store.getters.isDispatcher && this.orderInfo && this.orderInfo.status === 1
			},
			
			canComplete() {
				return this.$store && this.$store.getters && this.$store.getters.isTech && this.orderInfo && 
					   this.orderInfo.status === 2 && 
					   this.orderInfo.techId === this.$store.getters.userInfo.id
			},
			
			canAddProgress() {
				return this.$store && this.$store.getters && this.$store.getters.isTech && this.orderInfo && 
					   this.orderInfo.status === 2 && 
					   this.orderInfo.techId === this.$store.getters.userInfo.id
			},
			
			canCancel() {
				return this.orderInfo && (
					(this.$store && this.$store.getters && this.$store.getters.isUser && this.orderInfo.userId === this.$store.getters.userInfo.id && this.orderInfo.status <= 2) ||
					(this.$store && this.$store.getters && this.$store.getters.isAdmin)
				)
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.loadOrderDetail()
			this.loadOrderProgress()
		},
		methods: {
			async loadOrderDetail() {
				try {
					const res = await this.$api.getOrderDetail(this.orderId)
					if (res.code === 200) {
						this.orderInfo = res.data
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '加载失败',
						icon: 'none'
					})
				}
			},
			
			async loadOrderProgress() {
				try {
					const res = await this.$api.getOrderProgress(this.orderId)
					if (res.code === 200) {
						this.progressList = res.data || []
					}
				} catch (error) {
					console.error('加载进度失败:', error)
				}
			},
			
			async acceptOrder() {
				try {
					await this.$api.acceptOrder(this.orderId)
					uni.showToast({
						title: '接单成功',
						icon: 'success'
					})
					this.loadOrderDetail()
				} catch (error) {
					uni.showToast({
						title: error.message || '接单失败',
						icon: 'none'
					})
				}
			},
			
			assignOrder() {
				uni.navigateTo({
					url: `/pages/dispatcher/assign?orderId=${this.orderId}`
				})
			},
			
			async completeOrder() {
				uni.showModal({
					title: '确认完成',
					content: '确定要标记此订单为完成状态吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$api.completeOrder(this.orderId)
								uni.showToast({
									title: '操作成功',
									icon: 'success'
								})
								this.loadOrderDetail()
							} catch (error) {
								uni.showToast({
									title: error.message || '操作失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			
			addProgress() {
				this.progressContent = ''
				this.showProgressPopup = true
			},
			
			closeProgressPopup() {
				this.showProgressPopup = false
			},
			
			async submitProgress() {
				if (!this.progressContent.trim()) {
					uni.showToast({
						title: '请输入进度内容',
						icon: 'none'
					})
					return
				}
				
				try {
					await this.$api.addOrderProgress({
						orderId: this.orderId,
						content: this.progressContent.trim(),
						progressType: 2 // 进度更新
					})
					
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					
					this.closeProgressPopup()
					this.loadOrderProgress()
				} catch (error) {
					uni.showToast({
						title: error.message || '添加失败',
						icon: 'none'
					})
				}
			},
			
			async cancelOrder() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消此订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$api.cancelOrder(this.orderId)
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								})
								this.loadOrderDetail()
							} catch (error) {
								uni.showToast({
									title: error.message || '取消失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			
			getStatusClass(status) {
				const statusMap = {
					1: 'status-pending',
					2: 'status-processing',
					3: 'status-reviewing',
					4: 'status-completed',
					5: 'status-cancelled'
				}
				return statusMap[status] || ''
			},
			
			getStatusText(status) {
				const statusMap = {
					1: '待接单',
					2: '进行中',
					3: '待验收',
					4: '已完成',
					5: '已取消'
				}
				return statusMap[status] || '未知'
			},
			
			getProgressClass(type) {
				const typeMap = {
					1: 'progress-start',
					2: 'progress-update',
					3: 'progress-complete'
				}
				return typeMap[type] || 'progress-update'
			},
			
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 120rpx;
	}
	
	.order-card, .description-card, .contact-card, .progress-card {
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;
		
		.order-title {
			flex: 1;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-right: 20rpx;
			line-height: 1.4;
		}
		
		.order-status {
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			border-radius: 15rpx;
			white-space: nowrap;
		}
	}
	
	.order-info {
		.info-row {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 160rpx;
			}
			
			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				
				&.budget {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF6B6B;
				}
			}
		}
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.description-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.contact-info {
		.contact-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.contact-label {
				font-size: 28rpx;
				color: #666;
				width: 160rpx;
			}
			
			.contact-value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				margin-right: 20rpx;
			}
			
			.contact-btn {
				width: 120rpx;
				height: 60rpx;
				background: #007AFF;
				color: #fff;
				border: none;
				border-radius: 30rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.progress-list {
		.progress-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.progress-dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
				margin-top: 10rpx;
				flex-shrink: 0;
				
				&.progress-start {
					background: #28a745;
				}
				
				&.progress-update {
					background: #007bff;
				}
				
				&.progress-complete {
					background: #17a2b8;
				}
			}
			
			.progress-content {
				flex: 1;
				
				.progress-text {
					display: block;
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					margin-bottom: 10rpx;
				}
				
				.progress-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.action-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		gap: 20rpx;
		
		.action-btn {
			flex: 1;
			height: 80rpx;
			border: none;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			
			&.accept {
				background: #28a745;
				color: #fff;
			}
			
			&.assign {
				background: #007bff;
				color: #fff;
			}
			
			&.complete {
				background: #17a2b8;
				color: #fff;
			}
			
			&.progress {
				background: #6f42c1;
				color: #fff;
			}
			
			&.cancel {
				background: #dc3545;
				color: #fff;
			}
		}
	}
	
	.custom-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		
		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
		}
	}
	
	.progress-popup {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		max-height: 70vh;
		z-index: 10000;
		position: relative;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.popup-close {
				font-size: 48rpx;
				color: #999;
			}
		}
		
		.popup-content {
			padding: 30rpx;
			
			.progress-input {
				width: 100%;
				min-height: 200rpx;
				border: 2rpx solid #e0e0e0;
				border-radius: 10rpx;
				padding: 20rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
			}
			
			.popup-actions {
				display: flex;
				gap: 20rpx;
				
				.popup-btn {
					flex: 1;
					height: 80rpx;
					border: none;
					border-radius: 40rpx;
					font-size: 28rpx;
					
					&.cancel {
						background: #f0f0f0;
						color: #666;
					}
					
					&.confirm {
						background: #007AFF;
						color: #fff;
					}
				}
			}
		}
	}
	
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		font-size: 28rpx;
		color: #999;
	}
</style>